<template>
	<view>

		<view class="pay">
			<p id="orderNo" class="num">订单号:{{ order.order_no }}</p>
			<view>待支付</view>
			<p id="orderAddress" class="price">￥{{ order.amount }}</p>
		</view>

		<view>

			<u-radio-group v-model="order.paytype" class="pay-list" :wrap="true">
				<view class="item">
					<u-radio :label-disabled="false">微信支付</u-radio>
				</view>
				<view class="item">
					<u-radio :label-disabled="false">支付宝</u-radio>
				</view>
				<view class="item">
					<u-radio :label-disabled="false">钱包支付</u-radio>
				</view>
			</u-radio-group>


		</view>
		<view class="u-p-30">
				<u-button type="primary" shape="circle" @click="pay()">
					确认支付
				</u-button>
			</view>
	</view>
</template>

<script>
	import {
		getOrderDetail
	} from "@/api/api.js"
	export default {
		data() {
			return {
				order: {},
				value: 0,
			}
		},
		onLoad(options) {
			this.order.id = options.id;
			this.getData();
		},
		methods: {

			async getData() {
				console.log("getOrderDetail");
				uni.showLoading({
					title: '加载中...'
				});
				let data = {
					'id': this.order.id
				};
				await getOrderDetail(data).then((res) => {
					uni.hideLoading();
					console.log(res);
					this.order = res.orderInfo;
				}).catch(() => {

				})
			},

			pay() {
				
				uni.showToast({
					title: '支付成功',
					icon: 'success',
					duration: 2000
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/order/order'
					})
				}, 2000)

			},


		}
	}
</script>

<style lang="scss">
	.pay {
		text-align: center;

		.price {
			font-size: 50rpx;
		}
	}

	.pay-list {
		display: flex;
		flex-direction: column;

		.item {
			width: 100%;
			padding: 10rpx 30rpx;
			border-top: 1rpx solid #ccc;

			.u-radio {
				display: flex;
				flex-direction: row-reverse;
				align-items: center;
				justify-content: space-between;
			}
		}
	}
	.bottom{
		margin: 20rpx;
	}
</style>